<template>
    <div id="Home">
          <ul class="navBar">
                <li class="navContainer">
                     <div style="height: 110px;display:flex;justify-content:center" >
                    <div class="logo">
                        <img src="../../assets/logo.jpeg" alt="">
                    </div>
                    </div>
                    <el-menu
                     class="el-menu-vertical-demo"
                      background-color="#303133"
                      text-color="#fff"
                      :unique-opened= Boolean(true)
                    >
                         <el-submenu  v-for="(item,key) in level1" :key="key" :index="key+''" 
                         @click.native="showMenuList(item,key)"
                         default-active='0'
                         >
                            <template slot="title">
                                <span>{{item.permissionName}}</span>
                            </template>
                             <el-menu-item-group>
                                <el-menu-item v-for="(child,index) in navMenu" :key="index" :index="'1-'+index" style="width:146px"
                                    @click.native.stop="showDetail(child,index)"
                                >
                                    {{child.permissionName}}
                                </el-menu-item>
                            </el-menu-item-group>
                         </el-submenu>
                    </el-menu>
                </li>
          </ul>

        <DetailView :routeList="routeList"></DetailView>
    </div>
</template>

<script>
import NavMenu from './NavMenu'
import DetailView from './DetailView'
export default {
    components: {NavMenu,DetailView},
    data(){
        return {
            // 请求数据,根据不同的用户显式不用的导航列表
            level1: [], 
            navMenu: [],
            currentSelectedIndex: 0,
            itemTitle: '首页',
            responseData: [],
            lastSelectedPermission: '首页',
            routeList: []
        }
    },
    methods: {
        test(){
            alert("测试");
        },
        showMenuList(item,key){
            this.routeList = [];
            this.routeList.push(item.permissionName);
            /*
                自定义排序方式
            */ 
            this.navMenu =  this.responseData.permissions.filter(function(ele){
                return ele.parentId==item.permissionId && ele.plevel == 2
            })
            this.navMenu.sort(function(a,b){
                return a.sortNumber-b.sortNumber
            })
            this.lastSelectedPermission = item.permissionName;
            //记录上一次点击的位置,以便刷新之后,还会在原来的位置
            localStorage.setItem("lastSelectedPermission",item.permissionName)
            //如果点击的是主目录,则将上一次点击位置还原为0
            localStorage.setItem('lastSelected',0);
            this.$store.commit("initLastSelected",0)
            localStorage.setItem("lastNavMenu",JSON.stringify(this.navMenu));
            this.$router.push({name:item.description})
        },
        showHomeMenu(){
            // this.level1 = [
                // ]
            this.$store.commit("initLastSelected",0)
            // localStorage.setItem("lastSelectedPermission",'首页')
            this.$router.push({name:'首页'})
        },
        //显示详情页面
        showDetail(item,key){
            // 跳转的同时,记录跳转的name
            // this.lastSelected = key;
            localStorage.setItem("lastSelected",key);
            this.$store.commit('initLastSelected',localStorage.getItem('lastSelected'));
            var index = this.routeList.indexOf(item.description);
            // this.routeList.length = 3;
            this.routeList.splice(1,1);
            this.routeList.push(item.description);
            this.$router.push({name: item.description})
        }
    },
    created(){
        // this.showHomeMenu();
        this.lastSelectedPermission = localStorage.getItem("lastSelectedPermission");
        // 获取导航信息
        this.responseData = JSON.parse(localStorage.getItem("responseData"));
        this.level1 = this.responseData.permissions.filter(function(ele){
            return ele.plevel==1
        })
        this.level1.unshift({
                    description: '首页',
                    permissionName: "首页",
                    permissionType: 2
        })
        var _this = this;
        this.navMenu =  this.responseData.permissions.filter(function(ele){
            return ele.parentId==_this.level1[0].permissionId && ele.plevel == 2
        })
        var lastNavMenu = localStorage.getItem("lastNavMenu");
        this.navMenu = JSON.parse(lastNavMenu);
    }
}
</script>

<style lang="scss" scoped>
    #Home {
        width: 100%;
        height: 100%;
        .navBar{
            position: absolute;
            width: 149px;
            height: 100%;
            background:#303133;
            display: flex;
            flex-direction: column;
            z-index: 100;
            box-shadow: 2px 0 4px rgba(0,0,0,.1);
            overflow-x: hidden;
            .logo {
                width: 80px;
                height: 80px;
                background-color:#eaedf1;
                margin: 15px 0;
                box-sizing: border-box;
                border-radius: 40px;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .navContainer {
                overflow-y: scroll;
                overflow-x: hidden;
                width: 165px;
            }
            .navActive{background-color:#eaedf1; color:#333;}
        }
    }
    .el-submenu .el-menu-item {
        min-width: 146px !important;   
    }
    .el-menu {
        border-right: none !important;
    }

</style>

